<template>
	<!-- <view class="w-100 h-100vh" style="background: linear-gradient(90deg, #f43f3b, #ec008c);"> -->
	<view class="w-100 h-100vh">
		<!-- style="background-color:#000" -->
		<view class=" h-100vh seat-copy-box">
			<view class="left-0 w-100 p-0-32 bg-white z1000 bg_grmg" :style="'height: 210rpx;'" v-if="seatArray.length!=0">
				<view>
					<!-- 分区定价头 -->
					<view class="dp-f jc-sb ai-c fz-28 mt-30 bg-white color-aaa fz-24 bg_new p-r" v-if="isZonePrice" :style="{'overflow': 'hidden'}">
						<scroll-view :scroll-x="true" :style="{'height':'86rpx','width':'100vw','white-space': 'nowrap'}">
							<view :class="{'scrollContent':true,'jusc-c':setCenter()}" id="box">
								<view class="dp-f jc-c ai-c m-0-10 scrollContent">
									<image style="width:14px;height:13px" src="@/static/img/other/normal_seat_active.png"
										mode="aspectFit"></image>
									<span class="ml-10">已售</span>
								</view>
								<view class="dp-f jc-c ai-c m-0-10 scrollContent">
									<image style="width:14px;height:13px" src="@/static/img/other/normal_seat_choose.png"
										mode="aspectFit"></image><span class="ml-10">选中</span>
								</view>
								<view class="dp-f jc-c ai-c m-0-10 scrollContent" v-for="(item,i) in zonePrice" :key="i">
									<image style="width:14px;height:13px" :src="areaPrice(i)" mode="aspectFit"></image>
									<span class="ml-10">{{item[1]}}元</span>
								</view>
								<view class="dp-f jc-c ai-c m-0-10 scrollContent" v-if="haveHover">
									<image style="width:14px;height:13px" src="@/static/img/other/couple2_seat_left.png"
									mode="aspectFit"></image>
									<image style="width:14px;height:13px" src="@/static/img/other/couple2_seat_right.png"
									mode="aspectFit"></image>
									<span class="ml-10">情侣座</span>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 非分区定价头 -->
					<view class="w-80 dp-f jc-sb ai-c fz-28 mt30 bg-white color-aaa fz-24 bg_new" v-else>
						<view class="dp-f jc-c ai-c m-0-10">
							<image style="width:14px;height:13px" src="@/static/img/other/normal_seat.png"
								mode="aspectFit"></image><span class="ml-10">可选</span>
						</view>
						<view class="dp-f jc-c ai-c m-0-10">
							<image style="width:14px;height:13px" src="@/static/img/other/normal_seat_active.png"
								mode="aspectFit"></image><span class="ml-10">已售</span>
						</view>
						<view class="dp-f jc-c ai-c m-0-10">
							<image style="width:14px;height:13px" src="@/static/img/other/normal_seat_choose.png"
								mode="aspectFit"></image><span class="ml-10">选中</span>
						</view>
						<view class="dp-f jc-c ai-c m-0-10" v-if="haveHover">
							<image style="width:14px;height:13px" src="@/static/img/other/couple2_seat_left.png"
							mode="aspectFit"></image>
							<image style="width:14px;height:13px" src="@/static/img/other/couple2_seat_right.png"
							mode="aspectFit"></image>
							<span class="ml-10">情侣座</span>
						</view>
					</view>
					<view class="screen-box" :style="{'margin':'0 auto'}">
						<image src="@/static/img/other/pingmu.png" mode="" :style="{'width':'440rpx','height':'40rpx'}"></image>
						<text class="color-aaa fz-28">{{cinemaData.hallName}}</text>
					</view>
				</view>
			</view>
			<view class="movable-area-box" @touchmove="touchmove" @touchend="touchend" v-if="seatArray.length!=0">
							<text class="wh-50 iconfont icon-huanyuan1 pt-a color-aaa z1000 fz-34 bg-white box-s text-c br-6"
								style="bottom:70rpx; right: 20rpx;" @click="setDefault"></text>
							<!-- width: 100vw -->
							<movable-area v-if="seatArray.length > 0" :style="{'height':'100%','width':'200vw'}" direction="all"
								class="pt-a left-0" :out-of-bounds="true">
								<movable-view ref="movable" class="pt-center w2 h2 movable" :inertia="true" :scale="true" :scale-min="0.7"
									:scale-max="2" direction="all" @change="onMove" @scale="onScale"
									:scale-value="defaultLocation.scalc" :x="defaultLocation.left" :y="defaultLocation.top">
									<!-- 分区定价的身体 -->
									<view v-if="isZonePrice" class="pt-a move-seat-box2">
										<!-- <view style="width: 100rpx;" class="m-0-a mt-20 dp-f jc-c ai-c fz-20 color-999"></view> -->
										<view v-if="movableLeft" class="b-d-1"
											:style="{'height':movableHeight + 30 + 'px','width':0,'position':'absolute','left':'calc(50% - 2rpx)'}">
										</view>
			
										<view v-for="(item, index) in seatArray" :key="index" class="dp-f jc-c testGap"
											:style="'width:'+boxWidth+'px;height:'+seatSize+'px'">
											<!-- :style="'min-width:'+seatSize+'px;min-height:'+seatSize+'px'" -->
											<view v-for="(seat, col) in item" :key="seat.id" class="dp-ib testWidthHeight p-r"
												:style="{'min-width':seat.seatType == 2||seat.seatType == 1?seatSize + 5 + 'px':seatSize + 'px','min-height':seatSize + 'px',
												'margin-left':seat.seatType == 2 ? 0 + 'px' : 10 + 'rpx','margin-right':seat.seatType == 1 ? 0 + 'px' : 10 + 'rpx'}"
												@click="handleChooseSeat(index, col)">
												<!-- 此时显示情侣座的左右图片 -->
												<image v-if="seat && seat.state != -1 && seat.state != 0" class="w-100 h-100 "
													:src="seat.seatType | setSeatImg(seat.state)" mode="aspectFit">
												</image>
												<!-- 此时显示情侣座默认的不同分区的不同图片 -->
												<image v-else-if="seat.state == 0 && isZonePrice && (seat.type == '1' || seat.type == '2')" class="w-100 h-100 "
													:src="loverUnselectIMG(findColor(seat.area_id),seat)" mode="aspectFit">
												</image>
												<!-- 此时显示没有分区时的默认图片 -->
												<image v-else-if="seat.state == 0 && idArr.indexOf(seat.area_id) == -1"
													class="w-100 h-100" :src="seat.seatType | setSeatImg(seat.state)"
													mode="aspectFit">
												</image>
												<!-- 此时显示普通的分区图片 -->
												<image v-else-if="seat.state == 0" class="w-100 h-100 "
													:src="areaPrice(findColor(seat.area_id))">
												</image>
												<!-- <image v-else-if="seat.state == 0" class="w-100 h-100 "
													:src="areaPrice(findColor(seat.area_id),wandaDisabled(seat.area_id,index, col))">
												</image> -->
												
												<!-- 两个情侣座之间分隔的虚线 -->
												<image v-if="seat.state == 0 && isZonePrice && seat.type == '1'" :style="{'width':'2rpx','height':'40rpx',
												'position':'absolute','right':'0','bottom':'0'}" :src="loverUnselectDivideIMG(findColor(seat.area_id))" mode="aspectFit"></image>
											</view>
										</view>
			
										<view v-show="rowShow" class="pt-f br-15 over-h to-center2"
											 :style="'left: calc('+(-5 - moveX / scale)+'px);width:45rpx;'" v-if="mArr.length>0">
											<view class="w-100 dp-f ai-c jc-c f32"
												:style="{'min-height':seatSize+'px','margin-top':16+'rpx'}"
												v-for="(m, mindex) in mArr" :key="mindex">{{m}}</view>
											<view :style="'height: 20rpx;'"></view>
										</view>
									</view>
									<!-- 非分区定价身体 -->
									<!-- <view v-else class="pt-a move-seat-box2" :style="{'top':seatCol > 10 ? '110rpx' : 0}"> -->
									<view v-else class="pt-a move-seat-box2">
										<!-- <view style="width: 100rpx;" class="m-0-a mt-20 dp-f jc-c ai-c fz-20 color-999"></view> -->
										<view v-if="movableLeft" class="b-d-1"
											:style="{'height':movableHeight + 30 + 'px','width':0,'position':'absolute','left':'calc(50% - 2rpx)'}">
										</view>
			
										<view v-for="(item, index) in seatArray" :key="index" class="dp-f jc-c testGap"
											:style="'width:'+boxWidth+'px;height:'+seatSize+'px'">
											<view v-for="(seat, col) in item" :key="seat.id" class="dp-ib testWidthHeight"
												:style="{'min-width':seat.seatType == 2||seat.seatType == 1?seatSize + 5 + 'px':seatSize + 'px','min-height':seatSize + 'px',
												'margin-left':seat.seatType == 2 ? 0 + 'px' : 10 + 'rpx','margin-right':seat.seatType == 1 ? 0 + 'px' : 10 + 'rpx'}"
												@click="handleChooseSeat(index, col)">
												<image v-if="seat && seat.state != -1" class="w-100 h-100"
													:src="seat.seatType | setSeatImg(seat.state)" mode="aspectFit"></image>
											</view>
										</view>
			
										<view v-show="rowShow"  class="pt-f br-15 over-h to-center2"
											:style="'left: calc('+(-5 - moveX / scale)+'px);width:45rpx;'" v-if="mArr.length>0">
											<view class="w-100 dp-f ai-c jc-c f32 "
												:style="{'min-height':seatSize+'px','margin-top':16+'rpx'}"
												v-for="(m, mindex) in mArr" :key="mindex">{{m}}</view>
											<view :style="'height: 20rpx;'"></view>
										</view>
									</view>
								</movable-view>
							</movable-area>
			
							<view class="seatTip" v-if="delayShow">
								暂无座位信息，请换一场
							</view>
						</view>

			<!-- <view class="bottom-bar left-0 dp-f fd-cr z1000" v-if="isDisp == false">
				<view class="bg-white p-all-50 pd-b-20 wh" style="padding-top: 10rpx;">
						<view class="ai-c jc-c fz-28 color-333" v-if="SelectNum <= 0">
						<view class="pd-tb-10">推荐选座</view>
						<view class="dp-if recommond-seat-box">
							<view style="width: 106rpx;height: 60rpx;" class="recommond-item mr-20"
								v-for="(n, numindex) in 4" :key="numindex" @click="smartChoose(numindex+1)">
								{{numindex+1}}人
							</view>
						</view>
					</view>
					<view class="tishi" v-if="SelectNum == 0">
						<image src="/subpages//static/seatCopy-tips.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
						<text class="t">疫情期间，观影需全程佩戴口罩！</text>
					</view>
					<u-line color="rgba(203, 203, 203, 1)" v-if="SelectNum == 0"></u-line>
					<u-line color="rgba(112, 112, 112, 1)" border-style="dashed" v-else></u-line>
					<view class="info_huan">
						<view class="info_huan_left">
							<view class="f32 fontw pt-20 col000">
								{{cinemaInfo.movieName}}
							</view>
							<view class="mt15 fz-24">
								<text class="mr10"
									style="color: rgba(252, 77, 93, 1);">{{cinemaInfo.showTime | getWeekByDay}}</text>
								{{cinemaInfo.showTime | formateDate('MM月DD日')}}
								{{cinemaInfo.showTime | formateDate('HH:mm')}} {{cinemaInfo.dim}}
							</view>
						</view>
						<view class="info_huan_right flex-center align-center" style="color: rgba(252, 77, 93, 1)"
							@click="change">
							<text class="mr10 fontw f24">切换场次</text>
							<text class="iconfont iconarrowdown fontw f24"></text>
						</view>
					</view>
					<view class="mb50" v-if="SelectNum == 0 ">
						<u-line color="rgba(203, 203, 203, 1)"></u-line>
					</view>
					<view class="ai-c fw-w fz-28 color-333" v-if="SelectNum > 0 ">
						<scroll-view scroll-x="true">
							<view class="dp-if recommond-seat-box">
								<view class="choose-item mr-20 fontw col000 f24" v-for="(optItem, optindex) in optArr"
									:key="optindex">
									<image @click="deleteSeat(optindex)" class="close"
										src="../../static/img/other/close.png" mode=""></image>
									<view class="seat-text tc">{{optItem.row+'排'+optItem.col+'座'}}</view>
									<view class="seat-price tc">
										￥{{optItem.price}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<button class="dp-f jc-c ai-c br-round fz-30 color-fff public-big-btn " @click="buySeat"
						v-if="userTel" :disabled="SelectNum <= 0">
						{{SelectNum > 0?('￥'+aPrice+'元 确认座位'):'请选座位'}}
					</button>
					<button class="dp-f jc-c ai-c br-round fz-30 color-fff public-big-btn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber" :disabled="SelectNum <= 0" v-else>
						{{SelectNum > 0?('￥'+aPrice+'元 确认座位'):'请选座位'}}
					</button>
				</view>
			</view> -->
			<view class="selectInfo">
				<view class="tips">
					<view class="icon">
						<image src="/subpages/static/seatCopy-tips.png" mode=""></image>
					</view>
					<view class="text">
						<u-notice-bar mode="vertical" :list="tipsList" color="#FF4345" padding="0" font-size="24"
						:volume-icon="false"></u-notice-bar>
					</view>
				</view>
					<!-- <view class="ai-c jc-c fz-28 color-333" v-if="SelectNum <= 0">
					<view class="pd-tb-10">推荐选座</view>
					<view class="dp-if recommond-seat-box">
						<view style="width: 106rpx;height: 60rpx;" class="recommond-item mr-20"
							v-for="(n, numindex) in 4" :key="numindex" @click="smartChoose(numindex+1)">
							{{numindex+1}}人
						</view>
					</view>
				</view> -->
				<view class="info-movie">
					<view class="movie-left">
						<view class="info-movieName">
							{{cinemaData.movieName}}
						</view>
						<view class="info-time">
							<text>{{cinemaData.showTime | getWeekByDay}}</text>
							{{cinemaData.showTime | formateDate('MM月DD日')}}
							{{cinemaData.showTime | formateDate('HH:mm')}} {{cinemaData.dim}}
						</view>
					</view>
					<view class="movie-right" @click="change">
						<view>
							<text>切换场次</text>
							<image src="/subpages/static/seatCopy-switchSession.png" mode=""></image>
						</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="info-selectSeatList"  v-if="SelectNum > 0 ">
					<view class="selectSeatList-item" v-for="(optItem, optindex) in optArr"
						:key="optindex">
						<view class="item-box" @click="deleteSeat(optindex)">
							<view class="item-left">
								<view class="item-seat">{{optItem.row+'排'+optItem.col+'座'}}</view>
								<view class="item-price">
									￥<text>{{optItem.price}}</text>
								</view>
							</view>
							<image class="close"
								src="../../static/img/other/close.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
				<button class="selectSeat-confirm" @click="buySeat"
					v-if="userTel" :disabled="SelectNum <= 0">
					{{SelectNum > 0?('￥'+aPrice+'元 确认座位'):'请选座位'}}
				</button>
				<button class="selectSeat-confirm" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber" :disabled="SelectNum <= 0" v-else>
					{{SelectNum > 0?('￥'+aPrice+'元 确认座位'):'请选座位'}}
				</button>
			</view>

			<!-- 切换 -->
			<view class="huan_pick" v-if="isDisp">
				<tabs class="tab_hei" :list="timeList" name="showDate" height="40" inactive-color="#666"
					active-color="#FF4345" :timeTab="true" :is-scroll="t" :current="timeCurrent" barWidth="32"
					@change="changeTimeTab">
				</tabs>
				<!-- 场次盒子 start -->
				<scroll-view scroll-y="true" :refresher-enabled="triggered" :refresher-triggered="freshing"
					refresher-enabled @refresherrefresh="refresh" :style="{height: 700/1.2 + 'rpx'}">
					<view class="no-movice-order" v-if="desklist.length <= 0 " @click="changeTimeTab(timeCurrent + 1)">
						<view>今天已放映完</view>
						<view>看看其他时间</view>
					</view>
					<!-- <view class="movie_botm" v-else>
						<view class="movice-item" :style="{opacity: isOut(item.show_time) ? 1: 0.5}"
							v-for="(item, index) in desklist" :key="index">
							<view class="movie_city">
								<view class="time_left">
									<view class="time_font">{{item.show_time | formateDate('HH:mm')}}</view>
									<view class="time_hui">
										{{item.show_time | getExtendTime(item.duration,'m','HH:mm')}}散场
									</view>
								</view>
								<view class="Mandarin">
									<view class="Mandarin_font1">{{item.plan_type}} {{item.language}}</view>
									<view class="Mandarin_font2 overflow">{{item.hall_name}}</view>
								</view>
								<view class="qian_fen">
									<view class="qian_fen_font1">￥{{item.wp_price}}</view>
									<view class="qian_fen_font2">市场价{{item.wp_original_price}}</view>
								</view>
							</view>
							<view class="goupiao" @click="toLinkQuery(item, isOut(item.show_time))">
								{{isOut(item.show_time) ? '购票': '停售'}}
							</view>
						</view>
					</view> -->
					<view class="movie_botm_grid">
						<view class="movice-item" :style="[{'opacity': isOut(item.show_time) ? 1: 0.5},
						$moment(item.show_time).format('x').toString() == options.show_time?{'background-image': 'url(subpages/static/movie_botm_grid-select.png)','border-color': '#FF4345'}:{}]"
							v-for="(item, index) in desklist" :key="index"  @click="toLinkQuery(item, isOut(item.show_time))">
							<view class="time">
								{{item.show_time | formateDate('HH:mm')}}-{{item.show_time | getExtendTime(item.duration,'m','HH:mm')}}
							</view>
							<view class="type">
								{{item.plan_type}} {{item.language}}
							</view>
							<!-- <view class="price" v-if="">
								<text>{{item.wp_price}}</text>元起
							</view> -->
							<view class="price">
								<text>{{item.wp_price}}</text>元
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 场次盒子 end -->
			</view>
			<!-- 遮罩 -->
			<view class="mask" v-if="isDisp" @click="mask"></view>
		</view>
	</view>
</template>
<script>
	import tabs from '@/pages/components/u-tabs.vue'
	/*
	 *特别声明：
	 * 该页面的逻辑及思路来自作者[houzisbw](https://github.com/houzisbw)的vue选座项目github地址[点击](https://github.com/houzisbw/MeiTuanCinemaSmartChoose)。
	 * 本人只针对uni-app做了样式及逻辑适配。
	 * 感谢原作者[houzisbw](https://github.com/houzisbw), 如有侵权, 请举报
	 * 
	 */
	/* 
		cinemaInfo:{ 字段说明
			cinema_name: "", //影院名称
			dim: "国语 2D", //电影类型
			hallName: "", //影院厅名字
			movieName: "送你一朵小红花", //电影名字
			seatList: seatList, //座位列表
				seatList: [{ seatList字段说明
					{
						col: "", 座位列
						gCol: 3, Y坐标
						gRow: 1, X坐标
						id: "", 座位id
						price: "37.00", //座位价格
						row: "1", 座位行
						type: "0-2",座位类型及是否被购买
					}
				}]
			showTime: "2021-01-07T06:00:00.000Z", //放映时间
		}
	 */

	// import { seatData } from '@/public/seat-data.js'
	export default {
		data() {
			return {
				rowShow:true,
				
				windowWidth: 0,
				movableWidth: 0,
				movableLeft: '',
				movableHeight: '',
				height: 0,
				scaleMin: 1, //h5端为解决1无法缩小问题，设为0.95
				boxWidth: 400, //屏幕宽度px
				space: ' ', //空格
				seatArray: [], //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
				seatRow: 0, //影院座位行数
				seatCol: 0, //影院座位列数
				seatSize: 24, //座位尺寸
				SelectNum: 0, //选择座位数
				moveX: 0, //水平移动偏移量
				moveY: 0, //垂直移动偏移量
				scale: 1, //放大倍数
				minRow: 0, //从第几行开始排座位
				minCol: 0, //从第几列开始排座位
				showTis: true, //显示选座提示
				seatList: [], //接口获取的原始位置
				mArr: [], //排数提示
				optArr: [], //选中的座位数组。
				isWXAPP: false,
				defaultLocation: { //移动默认位置
					top: '50%',
					left: '50%',
					scalc: 0.90,
				},
				// 分区定价对象
				zoneObj: {},
				// 分区定价价格
				zonePrice: '',
				idArr: [],

				// 切换场次
				timeList: '',
				// 时间tab选中内容
				timeCurrent: 0,
				// 场次列表
				desklist: [],
				// 刷新
				freshing: false,
				// 换一场是否显示
				isDisp: false,
				delayShow: false,
				cinemaData:{},
				box2Top:0,
				tipsList:[
					'本影城谢绝外带食物以及宠物带入影厅',
					'疫情期间，观影需全程佩戴口罩！'
				],
				isRoll:false,
				tipTimer:'',//tip轮换的定时器的id
			};
		},
		components: {
			tabs
		},
		props: {
			// 是否进行分区定价
			isZonePrice: {
				type: Boolean,
				default: false
			},
			cinemaInfo: { //座位信息
				type: Object,
				default: {},
			},
			maxChoose: { //最大选座数量,
				type: [String, Number],
				default: 0
			},
			checkAddOrder: { //检查是否有订单的结果
				type: [String, Number],
				default: 0
			},
			// 获取换一场数据
			options: {
				type: Object,
				default: {},
			}
		},
		computed: {
			isOut(val) {
				return (val) => {
					let t1 = this.$moment(val);
					let t2 = this.$moment(new Date());
					//计算时间差并转换成标准时间单位
					let dura = t1.format('x') - t2.format('x');
					let tempTime = this.$moment.duration(dura);
					return tempTime.asMinutes() > 60 ? true : false
				}
			},
			aPrice() {
				let price = 0
				this.optArr.map(item => {
					price += Number(item.price)
				})
				return price.toFixed(2)
				// return this.SelectNum * 36
			},
			rpxNum() {
				return this.boxWidth / 750
			},
			pxNum() {
				return 750 / this.boxWidth
			},
			userTel: {
				get() {
					return this.$store.state.uInfo.tel
				},
				set(val) {
					this.$store.commit('setTel', val)
				}
			},
			// 是否有情侣座
			haveHover(){
				if(this.cinemaInfo.seatList < 1){
					return false
				}else{
					return this.cinemaInfo.seatList.some((i)=>{
						return i.type == '1' || i.type == '1-2'
					})
				}
			}
		},
		created() {
			this.cinemaData = this.$store.state.seatCopyInfo
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight()
				//获取宽度
				uni.getSystemInfo({
					success: (e) => {
						this.boxWidth = e.screenWidth
						//#ifdef H5
						this.scaleMin = 0.95
						//#endif
					}
				})
				this.getDom()
				// this.initData()
				
			})
		},
		async mounted() {
			// console.log('mounted',this.cinemaInfo);
			await this.getShows()
			this.$nextTick(()=>{
				this.setMovieWidth()
			})
		},
		watch: {
			'$store.state.uInfo'(val) {
				this.userTel = val.tel
			},
			cinemaInfo(val) {
				if (val.seatList.length > 0) {
					this.cinemaData = this.cinemaInfo
					this.resetSeat()
					this.initData()
				} else {
					this.delay()
				}
			}
		},
		methods: {
			// 动态设置分区定价头居中
			setCenter(){
				if(this.isZonePrice){
					// 有分区定价
					if(this.haveHover){
						// 有情侣座
						// console.log('有情侣座',this.zonePrice.length < 4)
						return this.zonePrice.length < 4
					}else{
						// 没有情侣座
						// console.log('没有情侣座',this.zonePrice.length < 5)
						return this.zonePrice.length < 5
					}
				}else{
					// 没有分区定价
					// console.log('没有分区定价',true);
					return true
				}
				
			},
			// ----------------------------------------------------------
			/* 需求：距离当前时间，2小时以外的场次
				比如现在是12点，也就是2点以外的场次
				所有包含万达字眼的影院，带分区的
				最后一个分区，设置为不可选。
			 */
			wandaDisabled(area_id){
				// area_id:该座位的分区id；i2：该座位是所在排的第几个；i1：该座位在第几排
				if(this.isZonePrice){
					// 有分区
					if(this.cinemaInfo.cinema_name.indexOf('万达') != -1){
						// 是万达
						let isLast = area_id == this.zonePrice[this.zonePrice.length - 1][0]//是否时最后一个分区
						// console.log(this.zonePrice);
						if(isLast){
							// console.log(this.seatArray);
							// 是最后一个分区
							// 当前时间
							let newTime = new Date().getTime()
							// 禁止时间
							let disabledTime = newTime + (2 * 60 * 60 * 1000)
							// 本场次时间
							let showTime = new Date(this.cinemaInfo.showTime).getTime()//由格林威治时间转为时间戳
							// 返回是否距开场两小时外,true:代表禁止选择
							return disabledTime < showTime
						}else{
							// 不是是最后一个分区
							return false
						}
					}else{
						// 不是万达
						return false
					}
				}else{
					// 没有分区
					return false
				}
			},
			// ----------------------------------------------------------
			touchmove(){
				// console.log('fdasfasd')
				if(!this.rowShow) return
				this.rowShow = false
			},
			touchend(){
				// console.log('fdasfasd',this.rowShow)
				this.rowShow = true
			},
			setMovieWidth() {
				let systemInfo = uni.getSystemInfoSync()
				let movableWidth = systemInfo.windowWidth
				this.windowWidth = movableWidth
				let box2Top
				let query = uni.createSelectorQuery().in(this);
				query.select('.move-seat-box2').boundingClientRect((data) => {
					if (data) {
						this.movableLeft = data.left
						this.movableHeight = data.height
						box2Top = data.top
						let seatBoxWidth = data.width
						if (seatBoxWidth < movableWidth) {
							return false
						} else {
							movableWidth = seatBoxWidth
							this.movableWidth = movableWidth
						}
					} else {
						setTimeout(this.setMovieWidth, 300)
					}
				}).exec();
				// query.select('.movable').boundingClientRect((data) => {
				// 	console.log('movable',data);
				// 	if(data){
				// 		box2Top = data.top - box2Top
				// 		this.box2Top = box2Top
				// 		console.log('box2Top',this.box2Top)
				// 	}
				// }).exec();
			},
			delay() {
				setTimeout(() => {
					if (!this.seatArray.length > 0) {
						this.delayShow = true
					}
				}, 1000)
			},
			// 点击遮罩
			mask() {
				this.isDisp = false
			},
			// 换一场是否显示
			change() {
				this.isDisp = true
			},
			// 购买跳转
			toLinkQuery(item, state) {
				if (state) {
					this.$common.toLinkQuery('seat', {
						no: item.show_id,
						cinemaId: item.cinema_id,
						mid: this.options.mid,
						dates: this.options.dates
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '本场次距离放映不足1小时，请更换场次'
					})
				}
			},
			// 下拉刷新
			refresh() {
				this.freshing = true
				this.getShows(true)
			},
			// 获取当前影院的某一电影某天的所有可以购买的场次
			async getShows(status = false) {
				if (status) {
					uni.showLoading({
						title: '加载中'
					})
				} else {
					await this.getDays()
				}
				this.$api.getShows({
					cinemaid: this.options.cinemaId,
					mid: this.options.mid,
					date: this.timeList[this.timeCurrent].showDate
				}).then(res => {
					this.desklist = res.data.data
					this.freshing = false
					// uni.hideLoading()
				})
			},
			// 获取当前影院的某一电影上映的日期列表
			async getDays() {
				this.loading = true
				await this.$api.getDays({
					cinemaid: this.options.cinemaId,
					mid: this.options.mid,
				}).then(res => {
					// console.log(res)
					this.timeList = res.data.data
					let index = this.timeList.findIndex(item => this.options.dates == item.showDate)
					this.timeCurrent = index != -1 ? index : 0
					// this.getShows()
				})
			},
			// 时间tab切换
			changeTimeTab(index) {
				if (index < this.timeList.length) {
					uni.showLoading({
						title: '加载中'
					})
					this.timeCurrent = index
					this.getShows(true)
				}
			},
			//设置分区
			areaPrice: (i) => {
				let data = {
					'0': require('@/static/img/other/1.png'),
					'1': require('@/static/img/other/2.png'),
					'2': require('@/static/img/other/3.png'),
					'3': require('@/static/img/other/4.png'),
					'4': require('@/static/img/other/5.png'),
					'5': require('@/static/img/other/6.png'),
				}
				let img = data[i]
				return img
			},
			// 情侣座 + 分区 时 情侣座未选中状态的图片
			loverUnselectIMG(i,item){
				let data = {
					'0': {'left': require('@/static/img/other/lover_1_left.png'),
					'right': require('@/static/img/other/lover_1_right.png')},
					'1': {'left': require('@/static/img/other/lover_2_left.png'),
					'right': require('@/static/img/other/lover_2_right.png')},
					'2': {'left': require('@/static/img/other/lover_3_left.png'),
					'right': require('@/static/img/other/lover_3_right.png')},
					'3': {'left': require('@/static/img/other/lover_4_left.png'),
					'right': require('@/static/img/other/lover_4_right.png')},
					'4': {'left': require('@/static/img/other/lover_5_left.png'),
					'right': require('@/static/img/other/lover_5_right.png')},
					'5': {'left': require('@/static/img/other/lover_6_left.png'),
					'right': require('@/static/img/other/lover_6_right.png')},
				}
				let res = data[i]
				if(item.type == '1'){
					res = res['left']
				}else if(item.type == '2'){
					res = res['right']
				}
				return res
			},
			// 情侣座未选中状态下的分隔线
			loverUnselectDivideIMG(i){
				let data = {
					'0': require('@/static/img/other/1-1.png'),
					'1': require('@/static/img/other/2-1.png'),
					'2': require('@/static/img/other/3-1.png'),
					'3': require('@/static/img/other/4-1.png'),
					'4': require('@/static/img/other/5-1.png'),
					'5': require('@/static/img/other/6-1.png')
				}
				return data[i]
			},
			// 数组排序
			sortNum(a, b) {
				return b[1] - a[1]
			},
			findColor(num) {
				for (let i = 0; i < this.zonePrice.length; i++) {
					if (num === this.zonePrice[i][0]) {
						return this.zonePrice[i][2]
					}
				}
			},
			initData() {
				if (this.cinemaInfo.area_price) {
					this.zoneObj = JSON.parse(this.cinemaInfo.area_price) || undefined
					let priceArr = []
					let totalArr = []
					let totalArr2 = []
					let idArr = []
					for (let var1 in this.zoneObj) {
						idArr.push(var1)
						totalArr.push([var1 + "," + this.zoneObj[var1]])
						priceArr.push(this.zoneObj[var1])
					}
					this.idArr = idArr
					totalArr.forEach((item) => {
						totalArr2.push(item[0].split(','))
					})
					totalArr2 = totalArr2.sort(this.sortNum)
					for (let i = 0; i < totalArr2.length; i++) {
						totalArr2[i][2] = i
					}
					this.zonePrice = totalArr2;
					// console.log("this.zonePrice", this.idArr)
				}
				let arr = this.cinemaInfo.seatList
				//假数据说明：id座位编号，row-行号，col-纵号，gCol-Y坐标，gRow-X坐标，Status-状态
				let row = 0
				let col = 0
				let minCol = parseInt(arr[0].gRow)
				let minRow = parseInt(arr[0].gCol)
				for (let i of arr) {
					minRow = parseInt(i.gCol) < minRow ? parseInt(i.gCol) : minRow
					minCol = parseInt(i.gRow) < minCol ? parseInt(i.gRow) : minCol
					row = parseInt(i.gCol) > row ? parseInt(i.gCol) : row
					col = parseInt(i.gRow) > col ? parseInt(i.gRow) : col
				}
				this.seatList = arr
				this.seatRow = row - minRow + 1
				this.seatCol = col - minCol + 1
				this.minRow = minRow
				this.minCol = minCol
				this.initSeatArray()
				
				
				// console.log('seatCol',this.seatCol)
				// console.log('seatRow',this.seatRow)
				// console.log('this.minRow',this.minRow)
				// console.log('this.minCol',this.minCol)
			},
			// 获取盒子高度
			getDom() {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.movable-area-box').boundingClientRect(res => {
					let height = res[0] ? res[0].width : 0
					this.defaultLocation.left = height * 0.5
				}).exec()
			},
			// 初始座位数组
			initSeatArray() {
				let seatArray = Array(this.seatCol).fill(0).map(() => Array(this.seatRow).fill({
					state: -1,
					id: '',
					row: '',
					col: '',
					type: '',
					seatType: '',
					price: 0,
				}));
				this.seatArray = seatArray
				this.seatSize = 24
				// this.seatSize = this.boxWidth > 0 ?
				// 	parseInt(parseInt(this.boxWidth, 10) / (this.seatCol + 3), 10) :
				// 	parseInt(parseInt(414, 10) / (this.seatCol + 3), 10)
				this.initNonSeatPlace();
				
				// ------设置万达的最后一个分区禁止选择------
				this.seatArray.forEach((i1)=>{
					i1.forEach((i2)=>{
						if(this.wandaDisabled(i2.area_id)){
							i2.state = 2
						}
					})
				})
				// ----------------------------------------
			},
			// 初始化座位的地方
			initNonSeatPlace() {
				let seat = this.seatList.slice()
				let arr = this.seatArray.slice()
				for (let num in seat) {
					let status = 2 //-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
					let char = this.$common.tearString(seat[num].type, '-')
					if (!char[1]) {
						status = 0
					} else if (seat[num].type === '') {
						status = -1
					}
					arr[parseInt(seat[num].gRow) - this.minCol][parseInt(seat[num].gCol) - this.minRow] = {
						state: status,
						id: seat[num].id,
						row: seat[num].row,
						col: seat[num].col,
						type: seat[num].type,
						seatType: char[0],
						price: seat[num].price,
						wp_original_price: seat[num].wp_original_price,
						settle_price: seat[num].settle_price,
						// 分区定价字段
						area_id: seat[num].area_id || ""
					}
				}
				this.seatArray = arr.slice()
				// console.log(this.seatArray)
				let mArr = []
				for (let i in arr) {
					let m = ''
					for (let n of arr[i]) {
						if (n.id) {
							m = n.row
						}
					}
					if (m) {
						mArr.push(m)
					} else {
						mArr.push('')
					}
				}
				this.mArr = mArr
			},
			// 放大缩小事件
			onScale(e) {
				this.showTis = false
				// this.moveX=-e.detail.x
				let w = this.boxWidth * 0.5
				let s = 1 - e.detail.scale
				this.moveX = w * s
				this.scale = e.detail.scale
				if (s > 0 || s === 0) {
					this.showTis = true
				}
			},
			// 移动事件
			onMove(e) {
				this.showTis = false
				this.moveX = e.detail.x
				this.moveY = e.detail.y
			},
			// 重置座位
			resetSeat() {
				this.SelectNum = 0
				this.optArr = []
				//将所有已选座位的值变为0
				let oldArray = this.seatArray.slice();
				for (let i = 0; i < this.seatCol; i++) {
					for (let j = 0; j < this.seatRow; j++) {
						if (oldArray[i][j] && oldArray[i][j].state === 1) {
							oldArray[i][j].state = 0
						}
					}
				}
				this.seatArray = oldArray;
			},
			// 处理座位选择逻辑
			handleChooseSeat(row, col) {
				console.log(this.seatArray[row][col].state)
				let seatValue = this.seatArray[row][col].state;
				let newArray = this.seatArray;
				//如果是已购座位，直接返回
				if (seatValue === 2 || seatValue === -1) return
				//如果是已选座位点击后变未选
				let data = newArray[row][col]
				data.seat = {
					row: row,
					col: col
				}
				let data2 = ''
				if (data.seatType == 1 || data.seatType == 2) {
					let i = 1
					if (data.seatType == 1) i = (i * 1)
					else if (data.seatType == 2) i = (i * -1)
					data2 = newArray[row][col + i]
					data2.seat = {
						row: row,
						col: col + i
					}
				}
				if (seatValue === 1) {
					data.state = 0
					if (data2) {
						data2.state = 0
						this.SelectNum -= 2
						this.getOptArr(data2, 0)
					} else {
						this.SelectNum--
					}
					this.getOptArr(data, 0)
				} else if (seatValue === 0) {
					if (Number(this.maxChoose) != 0) {
						if (this.optArr.length >= Number(this.maxChoose)) {
							uni.showToast({
								icon: 'none',
								title: `最多只能选择${this.maxChoose}个座位哦~`,
							})
							return
						}
					}
					if (data2) {
						if ((this.optArr.length + 2) > Number(this.maxChoose)) {
							uni.showToast({
								icon: 'none',
								title: `最多只能选择${this.maxChoose}个座位哦~`,
							})
							return
						}
					}
					data.state = 1
					if (data2) {
						data2.state = 1
						this.SelectNum += 2
						this.getOptArr(data2, 1)
					} else {
						this.SelectNum++
					}
					this.getOptArr(data, 1)
				}
				//必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
				this.seatArray = newArray.slice();

			},
			// 处理已选座位数组
			getOptArr(item, state) {
				let optArr = this.optArr
				if (state === 1) {
					optArr.push(item)
				} else if (state === 0) {
					let arr = []
					optArr.forEach(v => {
						if (v.id !== item.id) {
							arr.push(v)
						}
					})
					optArr = arr
				}
				this.optArr = optArr.slice()
			},
			// 推荐选座,参数是推荐座位数目，
			smartChoose(num) {
				// 先重置
				this.resetSeat()
				//找到影院座位水平垂直中间位置的后一排
				let rowStart = parseInt((this.seatCol - 1) / 2, 10) + 1;
				//先从中间排往后排搜索
				let backResult = this.searchSeatByDirection(rowStart, this.seatCol - 1, num);
				if (backResult.length > 0) {
					this.chooseSeat(backResult);
					this.SelectNum += num
					return
				}
				//再从中间排往前排搜索
				let forwardResult = this.searchSeatByDirection(rowStart - 1, 0, num);
				if (forwardResult.length > 0) {
					this.chooseSeat(forwardResult);
					this.SelectNum += num
					return
				}
				//提示用户无合法位置可选
				uni.showToast({
					icon: 'none',
					title: '无合法位置可选!'
				})
			},
			// 搜索函数,参数:fromRow起始行，toRow终止行,num推荐座位数
			searchSeatByDirection(fromRow, toRow, num) {
				/*
				 * 推荐座位规则
				 * (1)初始状态从座位行数的一半处的后一排的中间开始向左右分别搜索，取离中间最近的，如果满足条件，
				 *    记录下该结果离座位中轴线的距离，后排搜索完成后取距离最小的那个结果座位最终结果，优先向后排进行搜索，
				 *    后排都没有才往前排搜，前排逻辑同上
				 *
				 * (2)只考虑并排且连续的座位，不能不在一排或者一排中间有分隔
				 *
				 * */

				/*
				 * 保存当前方向搜索结果的数组,元素是对象,result是结果数组，offset代表与中轴线的偏移距离
				 * {
				 *   result:Array([x,y])
				 *   offset:Number
				 * }
				 *
				 */
				let currentDirectionSearchResult = [];

				let largeRow = fromRow > toRow ? fromRow : toRow,
					smallRow = fromRow > toRow ? toRow : fromRow;
				for (let i = smallRow; i <= largeRow; i++) {
					//每一排的搜索,找出该排里中轴线最近的一组座位
					let tempRowResult = [],
						minDistanceToMidLine = Infinity,
						gap = Infinity;
					for (let j = 0; j <= this.seatRow - num; j++) {
						//如果有合法位置
						if (this.checkRowSeatContinusAndEmpty(i, j, j + num - 1, num)) {
							//计算该组位置距离中轴线的距离:该组位置的中间位置到中轴线的距离
							let resultMidPos = parseInt((j + num / 2), 10);
							let distance = Math.abs(parseInt(this.seatRow / 2, 10) - resultMidPos);
							//如果距离较短则更新
							if (distance < minDistanceToMidLine) {
								minDistanceToMidLine = distance;
								//该行的最终结果
								tempRowResult = this.generateRowResult(i, j, j + num - 1)
							}
						}
					}
					//保存该行的最终结果
					currentDirectionSearchResult.push({
						result: tempRowResult,
						offset: minDistanceToMidLine
					})
				}
				// console.log(currentDirectionSearchResult)
				//处理后排的搜索结果:找到距离中轴线最短的一个
				//注意这里的逻辑需要区分前后排，对于后排是从前往后，前排则是从后往前找
				let isBackDir = fromRow < toRow;
				let finalReuslt = [],
					minDistanceToMid = Infinity;
				if (isBackDir) {
					//后排情况,从前往后
					for (let item of currentDirectionSearchResult) {
						if ((item.offset - minDistanceToMid) <= 1) {
							finalReuslt = item.result;
							minDistanceToMid = item.offset;
							break;
						} else {
							if (item.offset < minDistanceToMid) {
								finalReuslt = item.result;
								minDistanceToMid = item.offset;
							}
						}
					}
				} else {
					//前排情况，从后往前找
					currentDirectionSearchResult.reverse().forEach((item) => {
						if (item.offset < minDistanceToMid) {
							finalReuslt = item.result;
							minDistanceToMid = item.offset;
						}
					})
				}

				//直接返回结果
				return finalReuslt
			},
			/* 辅助函数，判断每一行座位从i列到j列是否全部空余且连续*/
			checkRowSeatContinusAndEmpty(row, startPos, endPos, num) {
				let isValid = true;
				for (let i = startPos; i <= endPos; i++) {
					let data = this.seatArray[row][i] || {
						state: -1,
						type: 1
					}
					let data2 = this.seatArray[row][i - 1] || {
						state: -1
					}
					let data3 = this.seatArray[row][i + 1] || {
						state: -1
					}
					let data4 = this.seatArray[row][i - 2] || {
						state: -1
					}
					let data5 = this.seatArray[row][i + 2] || {
						state: -1
					}
					let lastSeat = this.seatArray[row][i + num - 1] || {
						type: 1
					}
					// console.log(data)
					//  || (data.type != 1 && lastSeat.type == 1)
					if (lastSeat.type == 1) {
						isValid = false;
						break;
					}
					if (num % 2 == 1) {
						if (data.type != 0) {
							isValid = false;
							break;
						}
					}
					if (data.state !== 0) {
						isValid = false;
						break;
					}
					if (data2.state === 0) {
						if (data4.state === 0) {
							isValid = true;
						} else {
							isValid = false
						}
					} else {
						isValid = true;
						// t改
						isValid = false;
					}
					if (data3.state === 0) {
						if (data5.state === 0) {
							isValid = true;
						} else {
							isValid = false
						}
					} else {
						// isValid = true;
						// t改
						isValid = false;
					}
				}
				return isValid
			},
			// 辅助函数：返回每一行的某个合理位置的座位数组
			generateRowResult(row, startPos, endPos) {
				let result = [];
				for (let i = startPos; i <= endPos; i++) {
					result.push([row, i])
				}
				return result
			},
			// 辅助函数:智能推荐的选座操作
			chooseSeat(result) {
				let opt = this.optArr
				let oldArray = this.seatArray.slice();
				for (let i = 0; i < result.length; i++) {
					//选定座位
					let data = oldArray[result[i][0]][result[i][1]]
					data.state = 1
					data.seat = {
						row: result[i][0],
						col: result[i][1]
					}
					this.optArr.push(data)
				}
				this.seatArray = oldArray;
			},
			// 删除选中座位
			deleteSeat(index) {
				let data = this.optArr[index]
				this.handleChooseSeat(data.seat.row, data.seat.col)
			},
			// 还原默认位置
			setDefault() {
				this.defaultLocation = { //移动默认位置
					top: 1,
					left: 1,
					scalc: 1,
				}
				setTimeout(() => {
					this.defaultLocation = { //移动默认位置
						top: 0,
						left: 0,
						scalc: 0.95,
					}
				}, 0)
			},
			// 座位验证
			verificationSeat(seat) {
				//state: -1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
				let result = seat.every((item, index) => {
					let judge = []
					let leftData = this.seatArray[item.seat.row][item.seat.col - 1] || {
						state: -1
					}
					judge[0] = leftData.state == 0 ? true : false

					let leftData2 = this.seatArray[item.seat.row][item.seat.col - 2] || {
						state: -1
					}
					judge[1] = leftData2.state != 0 ? true : false

					let rightData = this.seatArray[item.seat.row][item.seat.col + 1] || {
						state: -1
					}
					judge[2] = rightData.state == 0 ? true : false

					let rightData2 = this.seatArray[item.seat.row][item.seat.col + 2] || {
						state: -1
					}
					judge[3] = rightData2.state != 0 ? true : false

					let flag = 'normal'



					// 左边一个座或右边一个座是 "墙" 或已 "被购买", 直接返回 true 
					if (leftData.state == -1 || leftData.state == 2) {
						return true
					} else if (rightData.state == -1 || rightData.state == 2) {
						return true
					}

					if (leftData.state == 1 && leftData2.state != 0) {
						return true;
					} else if (rightData.state == 1 && rightData2.state != 0) {
						return true;
					} else {
						// 左边两个和右边两个不能是 "未购座位"
						if (!this.judgeSeat(judge[0], judge[1])) {
							flag = 'err'
						}
						if (!this.judgeSeat(judge[2], judge[3])) {
							flag = 'err'
						}
					}
					// if(flag == 'normal'){
					// 	console.log('true',index,'---',item,'---',judge)
					// 	return true
					// }else{
					// 	console.log('false',index,'---',item,'---',judge)
					// 	return false
					// }
					return flag == 'normal'
				})
				//  result为 true 才能去购票

				console.log(result)
				if (!result) {
					return false
				}
				return true
			},
			// 判断座位类型
			judgeSeat(state1, state2) {
				if (state1) {
					if (state2) {
						return false
					} else {
						return true
					}
				} else {
					return true
				}
			},
			// 选定且购买座位
			buySeat() {
				if (this.SelectNum === 0) {
					return
				}
				let oldArray = [];
				for (let i = 0; i < this.seatCol; i++) {
					for (let j = 0; j < this.seatRow; j++) {
						if (this.seatArray[i][j].state === 1) {
							oldArray.push(this.seatArray[i][j])
						}
					}
				}
				if (!this.verificationSeat(oldArray)) {
					uni.showToast({
						icon: 'none',
						title: '请不要留下空位~'
					})
					return false
				}
				let totalPrice = 0
				oldArray.map(item => {
					totalPrice += item.price
				})
				if (totalPrice <= 0) {
					uni.showToast({
						icon: 'none',
						title: '锁座失败了~,金额为0'
					})
					return false
				}
				this.$emit('bug', oldArray)
			},
			// 绑定手机号
			getPhoneNumber(data) {
				if (data.detail.errMsg != 'getPhoneNumber:ok') {
					return
				}
				let _this = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// console.log(loginRes.code)
						_this.$api.getTel({
							encryptedData: encodeURIComponent(data.detail.encryptedData),
							iv: encodeURIComponent(data.detail.iv),
							code: loginRes.code,
						}).then(res => {
							_this.$store.commit('setTel', res.data.data)
							_this.buySeat()
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 设置不显示滚动条
	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none;
		width: 0; 
		height: 0; 
		color: transparent;
	}
	// 结合行内样式根据子元素数量动态设置滚动还是居中
	.scrollContent {
		display: flex;
		// justify-content: center;
		align-items: center;
		height: 100%;
	}
	// 动态设置居中需要的类名
	.jusc-c {
		justify-content: center
	}
	.p-r {
		position: relative;
	}

	.seat-copy-box {
		border-top-right-radius: 46rpx;
		border-top-left-radius: 46rpx;
		overflow: hidden;
		
		.selectInfo {
			border-radius: 8rpx;
			background-color: #fff;
			padding-bottom: 40rpx;
			overflow: hidden;
			position: fixed;
			bottom: 0;
			left: 28rpx;
			width: calc(100vw - 28rpx - 28rpx);
			
			.tips {
				height: 56rpx;
				width: 100%;
				padding: 10rpx 16rpx;
				background: linear-gradient(90deg, rgba(255,67,69,0.15) 0%, rgba(255,67,69,0.03) 100%);
				border-radius: 8rpx 8rpx 0px 0px;
				
				display: flex;
				.icon {
					width: 36rpx;
					height: 36rpx;
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
				.text {
					width: 100%;
				}
			}
			.info-movie {
				display: flex;
				justify-content: space-between;
				padding: 32rpx 20rpx 20rpx;
				border-bottom: 2rpx solid rgba(232,234,238,0.6);
				.movie-left {
					.info-movieName {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #0D0D15;
					}
					.info-time {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #3C444C;
						>text {
							color: #FF4345;
							margin-right: 4rpx;
						}
					}
				}
				.movie-right {
					view{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #428FF7;
						image {
							margin-left: 10rpx;
							height: 22rpx;
							width: 20rpx;
						}
					}
				}
			}
			
			.info-selectSeatList {
				height: 156rpx;
				width: 100%;
				white-space: nowrap;
				
				padding: 34rpx 0 38rpx;
				.selectSeatList-item {
					display: inline-block;
					height: 84rpx;
					width: 176rpx;
					background: rgba(221,221,221,0.25);
					border-radius: 4px;
					margin-right: 16rpx;
					&:first-child {
						margin-left: 24rpx;
					}
					.item-box {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
						width: 100%;
						.item-left {
							margin-right: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: flex-start;
							.item-seat {
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: bold;
								color: #0D0D15;
							}
							.item-price {
								font-size: 20rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: bold;
								color: #FF4345;
								text {
									font-size: 24rpx;
								}
							}
						}
						image {
							height: 32rpx;
							width: 32rpx;
						}
					}
				}
			}
			
			.selectSeat-confirm {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 94rpx;
				border-radius: 94rpx;
				background: linear-gradient(90deg, #FF5588 0%, #EF424F 100%);
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.seatTip {
		color: #4295FB;
		font-weight: 600;
		font-style: italic;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		background-color: black;
		opacity: .5;
	}

	.no-movice-order {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		view {
			width: 240rpx;
			color: #999;
			font-size: 28rpx;
			line-height: 40rpx;
			border-radius: 8rpx;
			margin-top: 20rpx;

			&:nth-of-type(2) {
				border: 2rpx solid #999;
			}
		}
	}

	// 开场时间
	.movie_botm {
		border-bottom: 1rpx solid #F7F7F7;

		.movice-item {
			display: flex;
			align-items: center;
			border: 2rpx solid rgba(96, 96, 96, 0.1);
			
			.movie_city {
				display: flex;
				padding: 20rpx 40rpx;
				width: 90%;
			
				.time_left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100rpx;
					width: 120rpx;
			
					.time_font {
						font-weight: bold;
						color: #333;
						font-size: 36rpx;
						height: 40rpx;
						line-height: 40rpx;
					}
			
					.time_hui {
						font-size: 24rpx;
						color: #aaa;
					}
				}
			}
			
			.Mandarin {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 30rpx;
				flex: 1;
			
				.Mandarin_font2 {
					color: #aaa;
					font-size: 24rpx;
					width: 230rpx;
				}
			
				.Mandarin_font1 {
					color: #6C6C6C;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
			
			.qian_fen {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 30rpx;
				flex: 1;
			
				.qian_fen_font1 {
					color: #f1255d;
					font-weight: 700;
					font-size: 32rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			
				.qian_fen_font2 {
					text-decoration: line-through;
					color: #aaa;
					font-size: 24rpx;
				}
			}
			
			.goupiao {
				background-image: linear-gradient(45deg, #f43f3b, #ec008c);
				color: #fff;
				box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, .2);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 16%;
				height: 64rpx;
				font-size: 28rpx;
				margin-right: 10rpx;
				border-radius: 500rpx;
			}
		}
	}
	.movie_botm_grid {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-gap: 26rpx 26rpx;
		margin: 40rpx;
		.movice-item {
			display: flex;
			flex-direction: column;
			padding: 0 14rpx;
			border: 2rpx solid #fff;
			border-radius: 12rpx;
			background: rgba(221,221,221,0.25);
			background-size: 100% 100%;
			.time {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #0D0D15;
			}
			.type {
				margin: 6rpx 0;
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.price {
				margin-bottom: 18rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 300;
				color: #FF4345;
				>text {
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
	}

	

	.huan_pick {
		padding-top: 24rpx;
		width: 100vw;
		height: 700rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1000;
		background: #FFFFFF;
	}

	.wh {
		padding: 0 23rpx;
		margin: 0 !important;
		background: #FFFFFF !important;
	}

	.tishi {
		// position: absolute;
		// top: -22rpx;
		// transform: translateY(-100%);
		// padding: 0 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 749rpx;
		height: 60rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4345;
		background: linear-gradient(90deg, rgba(255, 67, 69, .15) 0%, rgba(255,67,69,0) 100%);
		// border-radius: 20px 20px 0px 0px;

		.t {
			margin-left: 20rpx;
		}
	}

	.info_huan {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		margin-bottom: 22rpx;

		.sty {
			font-size: 24rpx;
			width: 137rpx;
			height: 41rpx;
			border: 1rpx solid #EF3B5D;
			border-radius: 21rpx;
			color: #EF3B5D;
			padding: 8rpx 0;
			background-color: white;
		}
	}

	.w-100 {
		width: 100%;
	}

	.w2 {
		width: 2rpx;
	}

	.h2 {
		height: 2rpx;
	}

	.w-80 {
		width: 80%;
		margin: 0 auto;
	}

	.p-all-10 {
		padding: 10rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.m-0-10 {
		margin: 0 10rpx;
	}

	.bg-unbtn {
		background-color: #f9abb3;
	}

	.bg-red-1 {
		background-color: #F45664;
	}

	.br-10 {
		border-radius: 10rpx;
	}

	.br-10 {
		border-radius: 6rpx;
	}

	.br-round {
		border-radius: 5000rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mr-20 {
		margin-right: 20rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.p-all-32 {
		padding: 32rpx;
	}

	.p-all-50 {
		padding: 50rpx;
	}

	.fd-cr {
		flex-direction: column-reverse;
		/* 主轴方向从下到上,默认从左到右 */
	}

	.bottom-bar {
		position: fixed;
		margin: 0 28rpx;
		bottom: var(--window-bottom);
	}

	.color-fff {
		color: #fff
	}

	.br-15 {
		border-radius: 15rpx;
	}

	.over-h {
		overflow: hidden;
	}

	.dp-ib {
		display: inline-block;
	}

	.testWidthHeight {
		margin: 0 10rpx;
	}

	.testGap {
		margin: 16rpx 0;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.mt-30 {
		margin-top: 30rpx;
	}

	.pa-v-2 {
		/* 定位垂直对齐 */
		left: 50%;
		transform: translateX(-50%)
	}

	.b-d-1 {
		border-right: 1px dashed #e5e5e5;
	}

	.h-100 {
		height: 100%;
	}

	.bg-f1 {
		background-color: #f1f1f1;
	}

	.bg-f9 {
		background-color: #F9F9F9;
	}

	.h-100vh {
		height: 100%;
	}

	.pt-f {
		position: fixed;
	}

	.pt-a {
		position: absolute;
	}

	.left-0 {
		left: 0;
	}

	.p-0-32 {
		// padding: 0 32rpx;
	}

	.pt-20 {
		padding-top: 20rpx;
	}

	.pt-30 {
		padding-top: 30rpx;
	}

	.bg-white {}

	.bg_new {
		margin-top: 60rpx;
		// background-color: #FFFFFF;
		width: 100%;
		height: 72rpx;
		display: flex !important;
		justify-content: space-evenly !important;
	}

	.mg {
		padding: 0;
		margin: 0;
	}

	.bg_gr {
		background: #F9F9F9;
	}

	.z1000 {
		z-index: 1000;
	}

	.fz-34 {
		font-size: 34rpx;
	}

	.fw-b {
		font-weight: bold;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.fz-28 {
		font-size: 28rpx;
	}

	.fz-24 {
		font-size: 24rpx;
	}

	.fz-40 {
		font-size: 40rpx;
	}

	.color-666 {
		color: #666666;
	}

	.color-aaa {
		color: #aaa;
	}

	.dp-f {
		display: flex;
	}

	.dp-if {
		display: inline-flex;
	}

	.jc-c {
		justify-content: center;
	}

	.jc-sb {
		justify-content: space-between;
	}

	.ai-c {
		align-items: center;
	}

	.fz-22 {
		font-size: 22rpx;
	}

	.color-333 {
		color: #333333
	}

	.m-0-a {
		margin: 0 auto;
	}

	.mt-48 {
		margin-top: 48rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.fz-20 {
		font-size: 20rpx;
	}

	.fz-30 {
		font-size: 30rpx;
	}

	.color-999 {
		color: #999999
	}

	.b-1 {
		border: 1px solid #CCCCCC;
	}

	.br-5 {
		border-radius: 5rpx;
	}

	.Stage {
		background-color: #dddddd;
		width: 380rpx;
		height: 34rpx;
		transform: perspective(34rpx) rotateX(-10deg);
		margin: 0 auto;
	}

	.bg-line {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.sel-seat {
		background: url('/static/img/other/normal_seat_choose.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.unsel-seat {
		background: url('/static/img/other/normal_seat.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.normal_seat_active.jpgt {
		background: url('/static/img/other/normal_seat_active.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.pd-tb-10 {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.pd-t-0 {
		padding-top: 0;
	}

	.pd-b-20 {
		padding-bottom: 20rpx;
	}

	.text-c {
		text-align: center;
	}

	.movable-area-box {
		height: calc(100% - 290rpx - 260rpx);
		position: relative;
		overflow: hidden;
	}

	.box-s {
		box-shadow: 0 0 4rpx 0 rgba(0, 0, 0, 0.1);
	}

	.wh-50 {
		display: block;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.recommond-seat-box {
		min-height: 80rpx;
		line-height: 80rpx;
		white-space: nowrap;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		align-items: center;

		.recommond-item {
			color: #555;
			font-size: 26rpx;
			border-radius: 4px;
			width: 100rpx;
			height: 55rpx;
			line-height: 55rpx;
			text-align: center;
			background-color: #f9f9f9;
		}

		.choose-item {
			position: relative;
			border-radius: 8rpx;
			width: 150rpx;
			height: 84rpx;
			padding: 4rpx 8rpx;
			background-color: rgba(246, 246, 246, 1);

			.close {
				position: absolute;
				top: -8rpx;
				right: -9rpx;
				color: #555;
				width: 24rpx;
				height: 24rpx;
			}

			.seat-text {
				text-indent: 6rpx;
				color: #555;
				line-height: 25rpx;
				// font-size: 26rpx;
				height: 25rpx;
				margin-top: 10rpx;

			}

			.seat-price {
				text-indent: 6rpx;
				font-size: 24rpx;
				color: #555;
				height: 23rpx;
				line-height: 23rpx;
				margin: 10rpx 0;

				.iconhui {
					color: #EF4546;
					font-size: 30rpx;
				}
			}

			.icon-cha {
				position: absolute;
				z-index: 2;
				width: 20rpx;
				height: 20rpx;
				right: 6rpx;
				top: -25rpx;
				color: #aaa;
				// font-size: 16rpx;
			}
		}
	}

	.screen-box {
		position: relative;
		height: 90rpx;
		padding-top: 10rpx;

		image {
			width: 85%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			height: 100%;
		}

		text {
			position: absolute;
			bottom: 0;
			display: block;
			width: 100%;
			text-align: center;
		}
	}


	.pt-center {
		top: 50%;
		left: 25%;
		transform: translateY(-50%) translateX(-50%);
	}

	.move-seat-box {
		width: 100vw;
		// top: calc((100% - 290rpx - 260rpx) / 2);
		top: calc((100% - 290rpx - 260rpx));
		left: -100vw;
	}

	.move-seat-box2 {
		// top:140rpx;
		// top: calc((100% - 290rpx - 260rpx));
		// width: 100vw;
		// left: -100vw;
		transform: translateY(-50%) translateX(-50%);
	}


	.to-center {
		// top: calc((100% - 290rpx - 260rpx) / 2 + 20rpx)
		top: calc((100% - 290rpx - 260rpx) + 20rpx)
	}

	.to-center2 {
		// position: absolute;
		top: 20rpx;
		color: white;
		background-color: rgba(36, 36, 36, .4);
		border-radius: 30rpx;
	}
</style>
